<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .light {
            background-color: black;
            color:aliceblue;
        }

        .dark {
            background-color:aliceblue;
            color:black;
        }
    </style>

</head>
<body>
    
        <div class = "light">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam eveniet quae veniam consequatur laudantium inventore exercitationem dolor, expedita nemo, atque sed sequi numquam amet perferendis at ab quod deserunt labore?
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam eveniet quae veniam consequatur laudantium inventore exercitationem dolor, expedita nemo, atque sed sequi numquam amet perferendis at ab quod deserunt labore?
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam eveniet quae veniam consequatur laudantium inventore exercitationem dolor, expedita nemo, atque sed sequi numquam amet perferendis at ab quod deserunt labore?
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam eveniet quae veniam consequatur laudantium inventore exercitationem dolor, expedita nemo, atque sed sequi numquam amet perferendis at ab quod deserunt labore?
        </div>


        <script>
            let div = document.querySelector('div');

            div.onclick = function() {
                if(div.className == 'light') {
                    div.className = 'dark';
                }else if(div.className == 'dark') {
                    div.className = 'light';
                }
            }
        </script>
</body>
</html>